<template>
  <ContainerGroup>
    <Container>
      <OperationContainer
        align="right"
        style="display: flex; justify-content: space-between"
      >
        <div class="block">
          <span class="demonstration">年/月：</span>
          <el-date-picker
            v-model="dataTime"
            size="mini"
            type="daterange"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <span class="form-item-label" style="margin-left: 10px">医生：</span>
          <el-select
            v-model="jobNumber"
            placeholder="请选择"
            filterable
            size="mini"
            remote
            :remote-method="getDoctListVue"
            :loading="ysLoading"
            clearable
          >
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.value + '-' + item.lable"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span class="form-item-label" style="margin-left: 10px"
            >是否支付：</span
          >
          <el-select v-model="payOrNot" size="mini" placeholder="请选择">
            <el-option
              v-for="item in payment"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="btn-box">
          <Button
            icon="search"
            @click="handleSeach"
            >查询</Button
          >
          <Button icon="reset" @click="handleRest">重置</Button>
          <Button icon="export" @click="handleExport">导出</Button>
        </div>
      </OperationContainer>
    </Container>
    <Container height="fill" display="flexY">
      <div class="tab-box">
        <el-table
          v-loading="loading"
          :data="tableData"
          :span-method="objectSpanMethod"
          stripe
          border
          :header-cell-style="{ background: '#f5f7fa' }"
          style="width: 100%"
          height="100%"
          size="small"
        >
          <el-table-column
            prop="emplName"
            align="center"
            label="开单医生"
            width="120"
          />
          <el-table-column
            prop="deptName"
            label="科室"
            align="center"
            width="120"
          />
          <el-table-column
            prop="patientName"
            align="left"
            label="患者姓名"
            width="120"
          />
          <el-table-column
            prop="diagName"
            align="center"
            label="诊断"
            width="260"
          />
          <el-table-column
            prop="phoneTel"
            align="center"
            label="患者电话"
            width="120"
          />
          <el-table-column
            prop="createTime"
            align="center"
            label="预约日期"
            width="180"
          />
          <el-table-column prop="RYRQ" align="center" label="入院日期" />
          <el-table-column prop="CYRQ" align="center" label="出院日期" />
          <el-table-column prop="FYZJRQ" align="center" label="费用转结日期" />
          <el-table-column prop="isPay" align="center" label="是否支付" />
        </el-table>
      </div>
      <div class="fen-ye">
        <!-- <span class="zong-ji">总计：{{ dataTotal }}</span> -->
        <div style="text-align: right; padding: 8px 0 0 0">
          <el-pagination
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="prev, pager, next, sizes, total"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </Container>
  </ContainerGroup>
</template>
<script>
import {
  listPatientInfoToDoctor,
  getListPatientInfoToDoctorExcel,
} from "../../utils/apis/preparedness";
import { getDoctList } from "../../utils/apis/registrationApi";
export default {
  name: "CheckReport",
  data() {
    return {
      options: [],
      spanArr: [],
      psition: 0,
      loading: false,
      tableData: [],
      jobNumber: "",
      dataTime: ["2023-03-01", this.$moment().format("YYYY-MM-DD")],
      total: 0,
      pageNum: 1,
      currentPage: 1,
      pageSize: 10,
      spanArr: [],
      ysLoading: false,
      payOrNot: "",
      payment: [
        {
          value: 0,
          label: "全部",
        },
        {
          value: 1,
          label: "未收费",
        },
        {
          value: 2,
          label: "已收费",
        },
      ],
    };
  },
  mounted() {
    if (this.payment.length > 0) {
      this.payOrNot = this.payment[0].value; // 设置 value 的初始值为第一个选项的值
    }
    this.getSpanArr();
    // console.log(111111111, this.jobNumber);
  },
  methods: {
    getDoctListVue(query) {
      if (query !== "") {
        this.ysLoading = true;
        getDoctList({ deptCode: [], name: query }).then((res) => {
          this.ysLoading = false;
          if (res.data.code === 200) {
            this.options = [];
            let dats = {
              label: "",
              value: "",
            };
            res.data.data.forEach((element) => {
              dats = {
                lable: element.name,
                value: element.id,
              };
              this.options.push(dats);
            });
          }
        });
      } else {
        this.options = [];
      }
    },
    handleSeach() {
      this.dataTime = this.dataTime;
      this.pageNum = 1;
      this.getSpanArr();
    },
    handleRest() {
      this.jobNumber = "";
      this.dataTime = ["2023-03-01", this.$moment().format("YYYY-MM-DD")];
      if (this.payment.length > 0) {
        this.payOrNot = this.payment[0].value; // 设置 value 的初始值为第一个选项的值
      }
      this.getSpanArr();
    },
    handleCurrentChange(val) {
      // console.log("--------------", val);
      this.pageNum = val;
      this.getSpanArr();
    },
    handleSizeChange(val) {
      // console.log("--------------", val);
      this.pageSize = val;
      this.getSpanArr();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.loading = true;
      this.getSpanArr();
    },
    getSpanArr() {
      const params = {
        type: 1,
        jobNumber: this.jobNumber,
        startTime: this.dataTime[0] + " 00:00:00",
        endTime: this.dataTime[1] + " 23:59:59",
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        isPay: this.payOrNot,
      };
      this.loading = true;
      listPatientInfoToDoctor(params).then((res) => {
        this.loading = false;
        if (res.data.code === 200) {
          this.tableData = res.data.data.list;
          this.total = res.data.data.total;
          this.rowspan();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    rowspan() {
      this.spanArr = [];
      (this.tableData || []).forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1);
          this.position = 0;
        } else {
          if (
            this.tableData[index].deptName ===
            this.tableData[index - 1].deptName
          ) {
            this.spanArr[this.position] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.position = index;
          }
        }
      });
      // console.log(this.spanArr);
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 表格合并行
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    // 导出
    handleExport() {
      const params = {
        type: 1,
        jobNumber: this.jobNumber,
        startTime: this.dataTime[0] + " 00:00:00",
        endTime: this.dataTime[1] + " 23:59:59",
        isPay: this.payOrNot,
      };
      getListPatientInfoToDoctorExcel(params).then((res) => {
        const blob = new Blob([res.data]);
        const fileName = "院前患者统计列表" + ".xlsx";
        const URL = window.URL || window.webkitURL || window.moxURL;
        if ("download" in document.createElement("a")) {
          // 非IE下载
          const elink = document.createElement("a");
          elink.download = fileName; // 命名下载名称
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob); // 表示一个指定的file对象或Blob对象
          document.body.appendChild(elink);
          elink.click(); // 点击触发下载
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.btn-box {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  // border: 1px solid red;
}
.tab-box {
  flex: 1;
  display: flex;
  overflow: hidden;
  // margin-bottom: 15px;
}
</style>
